<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<style>
	.layui-table-cell{
		height: 50px;
	}
	.table-img{
		height: 50px;
	}
	#upload-img{
		width: 100px;
		height: 100px;
		border: 1px solie #A2A2A2;
	}
</style>

<script type="text/html" id="form-type-edit">
<form class="layui-form" id="type-edit" action="" style="margin: 20px 40px 0px 0px ">
	<input type="hidden" name="id">
	<div class="layui-form-item">
		<label class="layui-form-label">分类名称</label>
		<div class="layui-input-inline">
			<input type="text" name="name" required lay-verify="required"
				placeholder="请输入分类名称" autocomplete="off" class="layui-input">
		</div>
	</div>
	
	<div class="layui-form-item layui-form-text">
		<label class="layui-form-label">分类描述</label>
		<div class="layui-input-block">
			<textarea name="description" placeholder="请输入分类的描述" class="layui-textarea"></textarea>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">上级分类</label>
		<div class="layui-input-inline">
			<select name="parent" >
				
			</select>
		</div>
	</div>
	
	<div class="layui-form-item">
		<input type="hidden" name="image">
		<label class="layui-form-label">图片</label>
		<div class="layui-input-inline">
			<div class="layui-upload">
				<button type="button" class="layui-btn" id="upload">上传图片</button>
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="upload-img">
					<p id="demoText"></p>
				</div>
			</div>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">状态</label>
		<div class="layui-input-block">
			<input type="radio" name="status" value="0" title="前台可见" checked> <input
				type="radio" name="status" value="1" title="前台隐藏">
		</div>
	</div>
	
	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="type-edit">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>
</script>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	<legend>商品分类列表</legend>
</fieldset>

<form class="layui-form" id="type-search">
	<div class="layui-form-item">
		<div class="layui-input-inline">
			<input class="layui-input" type="text" name="name" placeholder="关键字">
		</div>
		<div class="layui-input-inline">
			<select name="parent"></select>
		</div>
		<div class="layui-input-inline">
			<select name="status">
				<option value=""></option>
				<option value="0">前台可见</option>
				<option value="1">前台隐藏</option>
			</select>
		</div>
		<div class="layui-input-inline">
			<button class="layui-btn" lay-submit lay-filter="type-search"><i class="layui-icon layui-icon-search"></i></button>
		</div>
	</div>
</form>

<table id="type-list" lay-filter="type-list"></table>

<!-- 定义一个模板 
	在模板中应该使用laytpl进行逻辑上的控制
	{{# JS代码  }}
-->
<script type="text/html" id="type-image">
	{{# if(d.image!=null) { }}
		<img class="table-img" src="upload/{{d.image}}" />
	{{# } }}
</script>

<!-- 定义一个行的工具条 -->
<script type="text/html" id="type-option">
	<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>
	<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">编辑</a>
</script>

<script>
	layui.use(["table","form","upload"],function(){
		var table = layui.table;
		var form = layui.form;
		var upload = layui.upload;
		
		form.render();
		//给搜索的表单加载分类信息
		getFirst(0, $("#type-search select[name='parent']"));
		
		//给搜索表单添加动作
		form.on("submit(type-search)", function(data){
			//
			
			//刷新表格
			table.reload("type-list", {
				page: {curr: 1},//重新从第 1 页开始
				where: data.field,
			});
			
			return false;
		});
		
		//渲染表格
		table.render({
			elem : "#type-list",
			url : "admin/type/search.json",
			page : true,//开启分页
			/* parseData: function(res){
				return {
					code: res.code,
					msg: res.message,
					count: res.data.total,
					data: res.data.list
				}
			}, */
			cols : [ [
				{field: "选择", type: "checkbox"},
				{title: "ID", field: 'id', width: 70, sort: true},//指定表格中的一个列如何渲染
				{title: "类型名", field: 'name', width: 150},
				{title: "描述", field: 'description', width: 350},
				{title: "上级分类", field: 'pname', width: 150},
				{title: "图片", field: 'image', templet: '#type-image'},
				{title: "状态", field: 'status', templet: function(d){
					if(d.status == 0){
						return "前台可见";
					}else{
						return "前台隐藏";
					}
				}, width: 100},
				{title: "操作", toolbar: '#type-option'},
			] ]
		});
		
		 
		//监听工具条
		table.on('tool(type-list)', function(obj) {
			//获取这一行的数据
			var data = obj.data;
			console.log(data);
			
			//obj.event 区分点击的是哪一个 按钮
			
			if (obj.event === 'delete') {
				typeDelete(data.id);
			} else if (obj.event === 'edit') {
				typeEdit(data);
			}
		});
		
		//文件上传
		function initUpload(){
			upload.render({
				elem : "#upload",
				url : "upload.json",
				done : function(data){
					if(data.code > 0){
						$("#upload-img").attr("src","upload/" + data.message);
						$("input[name='image']").val(data.message);
					}else {
						layer.msg(data.message);
					}
				},
				error : function(){
					console.log("请求失败")
				}
			});
		};
		
		//获取一级分类
		function getFirst(parent,select){
			//Ajax 异步请求，获取一级分类
			$.ajax({
				url : "admin/type/getFirst.json",
				data : {},
				type : "post",
				dataType : "json",
				success : function(data){
					if(data.code > 0){
						var html = "<option value=''>请选择上级分类</option>";
						$.each(data.data,function(index,item){
							if(parent == item.id){
								html += "<option value='"+item.id+"' selected='selected'>"+item.name+"</option>";
							}else{
								html += "<option value='"+item.id+"'>"+item.name+"</option>";
							}
						});
						
						select.html(html);
						
						form.render();
					}
				},
				error : function(){
					console.log("请求失败");
				}
			});
		};
		
		//定义编辑操作
		function typeEdit(data){
			
			var index = layer.open({
				type : 1,
				title : "编辑分类信息",
				area : ["800px","600px"],
				content : $("#form-type-edit").html(),
			});
			
			//将数据填入表单
			$("#type-edit input[name='id']").val(data.id);
			$("#type-edit input[name='name']").val(data.name);
			$("#type-edit textarea[name='description']").val(data.description);
			$("#type-edit #upload-img").attr("src","upload/"+data.image);
			$("#type-edit input[name='image']").val(data.image);
			
			if(data.status == 1){
				$("#type-edit input[value='1']").attr("checked", "checked");
			}
			
			var parent = data.parent;
			
			getFirst(parent, $("#type-edit select[name='parent']"));
			
			initUpload();
			
			form.render();
			
			//表单提交
			form.on("submit(type-edit)",function(data){
				
				$.ajax({
					url : "admin/type/edit.json",
					data : data.field,
					type : "post",
					dataType : "json",
					success : function(data){
						layer.msg(data.message);
						
						//刷新表格
						table.reload("type-list", {});
						
						//关闭弹出层
						layer.close(index);
					},
					error : function(){
						console.log("请求失败");
					}
				});
				
				return false;
			});
		};
		
		//定义删除操作
		function typeDelete(id){
			//删除操作
			layer.confirm('真的要删除这一条记录吗', function(index) {
				//使用Ajax删除
				$.ajax({
					url : "admin/type/delete.json",
					data : {id: id},
					type : "post",
					dataType : "json",
					success : function(data){
						
						layer.msg(data.message);
						
						//刷新表格
						table.reload("type-list", {});
					},
					error : function(){
						console.log("请求失败");
					}
				});
				layer.close(index);
			});
		};

	});
</script>